<template>
  <div class="login-container">
    <!-- <div class="login-form"> -->
    <div class="bg">
      <h1 class="header">
        <i><img src="../../assets/img/logo.png" alt="国家电投科技情报大脑"></i>
        <span>国家电投科技情报大脑</span>
      </h1>
      <div class='login'>
          <div class='login_title'>
            <span>管理员登录</span>
          </div>
          <div class='login_fields'>
            <el-form class="login-form" ref="form" :rules="rules" :model="form" label-width="0">
              <el-form-item label="" prop="name">
                <el-input type='text' class="elinput" v-model="form.name" placeholder="用户名">
                  <i slot="prefix" style="color:#333;" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input class="elinput" @keyup.enter.native="submitForm('form')" v-model="form.password" type="password" placeholder="密码">
                  <i slot="prefix" style="color:#333;" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              
              <el-form-item>
                <div class='login_fields__submit'>
                  <input type='button' value='登录' @click.prevent="submitForm('form')" >
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class='success'>
          </div>
          <div class='disclaimer'>
            <p>欢迎登录</p>
          </div>
      </div>
      <div class='authent'>
        <div class="loader"></div>
        <p>认证中...</p>
      </div>
      <div class="OverWindows"></div>
    </div>
  </div>
</template>
<script>
// import '../../assets/css/demo.css'
import BASE64 from '@/utils/base64.js'
var jwt = require('jsonwebtoken')
import {mapState} from "vuex"
import { clearLoginInfo } from '@/utils/cleanLogin'
export default {
  name: "login",
  data() {
    return {
      privateKey: 'xx1WET12^%3^(WE45',
      form: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  computed:{
    ...mapState(['levelCode', 'levelName']),
    username:{
      get: function() {
        return this.$store.state.username;
      },
      set: function(newValue) {
        this.$store.commit("setUsername", newValue);
      }
    },
    companyActive:{
      get: function() {
        return this.$store.state.companyActive;
      },
      set: function(newValue) {
        // console.log(newValue);
        this.$store.commit("SetCompanyActive", newValue);
      }
    },
  },
  mounted(){
    this.init()
    this.companyActive = 0
  },
  methods: {
    init(){
      //粒子背景特效
	    $('.bg').particleground({
	        dotColor: '#E8DFE8',
	        lineColor: '#133b88'
      });
      // 默认苏州
      this.$store.commit('setLevelCode', '320500')
      clearLoginInfo()
    },
    // 初始城市名
    getLevelName(func){
      this.$post(this.$Url.address.regionCode,{
        code : this.levelCode
      }).then((res)=>{
        if(res.data){
          this.$store.commit('levelNameInit', res.data.criName)
        }
        func && func()
      }).catch((e)=>{
        console.log(e)
      })
    },
    // 缓存数据
    addCache(func) {
      this.$post(this.$Url.patent.cache, {
        "code": this.levelCode,
        "musts": {
          "an1_type": "企业"
        },
        "aggs": {
          "field": "industry_label",
          "type": "base",
          "size": "500",
        }
      }).then(res=>{
        func && func()
      }).catch(e=>{console.log(e)})
    },
    msg(data){
      // 存token
      this.$cookie.set('token', data.data)
      // 用户名
      let realName = jwt.decode(data.data).name
      this.$cookie.set('realName', realName)
      this.username = BASE64.encode(this.form.name)
      
      let promise = new Promise((resolve, reject) => {
        this.getLevelName(() => {
          resolve('next')
        })
      })
      promise.then(() => {
        this.addCache(() => {
          this.$router.push({
            name: 'Home'
          })
        })
      })
      
    },
    login(){
      if(this.form.password==='Zyyt@2000'){
        // demo是试用版账号，这里做限制不能登录正式版
        this.$message.error('用户名或密码输入错误！');
      }else{
        this.$post(this.$Url.account.getToken,{
          username: BASE64.encode(this.form.name),
          password: this.$md5(this.$md5(this.privateKey)+this.$md5(this.form.password))
        }).then(data => {
          // console.log(data)
          if(data.status == 200){
            this.msg(data)
          } else {
            if(data.status === 40310){
                this.$confirm(data.message, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => { 
                  this.enforce() // 强制登录
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                  });          
                });
            }else{
               this.$message.error(data.message);
            }
          }
        }).catch(error => {
          this.$message.error('用户名或密码输入错误！');
          console.log(error);
        })
      }
    },
    // 强制登录
    enforce(){
       this.$post(this.$Url.account.enforce,{
          username: BASE64.encode(this.form.name),
          password: this.$md5(this.$md5(this.privateKey)+this.$md5(this.form.password))
        }).then(data => {
          // console.log(data)
          if(data.status===200){
            this.msg(data)
          }
          /* else if(data.status === 40310){
            this.$confirm(data.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.enforce()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          } */
        }).catch((e)=>{
          console.log(e)
        })
    },
    submitForm(formName) {
      // this.$router.push({name:'Home'})
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
  position: absolute;
  left:50px;
  top:20px;
  img{
    height:38px;
  }
  span{
    font-size:26px;color:#fff;
    font-weight: bold;
    display:block;
    float:right;
    margin:5px 10px;
    &::before{
      content: '';
      display:block;
      float:left;
      width:3px;
      height:20px;
      background:#fff;
      margin:10px 10px;
    }
  }
  
}
.el-input__icon{
  font-size:20px;
  margin-right:15px;
}
.bg {
  background-size: 100%;
	background: url(../../assets/img/Starry.jpg) center center no-repeat; 
  width: 100%;
  height: 100%;
  position: fixed;
  background-size:cover;
}


body ::-webkit-input-placeholder {
  color: #fff;
}
body .authent {
  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  display: none;
  background: #35394a;
  /* Old browsers */
  /* FF3.6+ */

  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  position: absolute;
  left: 0;
  right: 90px;
  margin: auto;
  width: 220px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 20px 70px;
  top: 200px;
  bottom: 0;
  height: 70px;
  opacity: 0;
}
body .authent p {
  text-align: center;
  color: white;
}
body .success {
  display: none;
  color: #d5d8e2;
}
body .success p {
  font-size: 14px;
}
body p {
  color: #D3D7F7;
  font-size: 16px;
  text-align: left;
}
body .testtwo {
  left: -320px !important;
}
body .test {
  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  top: -100px !important;
  -webkit-transform: rotateX(70deg) scale(0.8) !important;
          transform: rotateX(70deg) scale(0.8) !important;
  opacity: .6 !important;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
body .login 
{
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  top: 20px;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
  -webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;
          transition-property: transform,opacity,box-shadow,top,left;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transform-origin: 161px 100%;
      -ms-transform-origin: 161px 100%;
          transform-origin: 161px 100%;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  position: relative;
  width: 400px;
  /*border-top: 2px solid #D8312A;*/
  height: 420px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  padding: 40px 40px 40px 40px;
  background: #35394a;
  /* Old browsers */
  /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(-100%, #35394a), color-stop(100%, rgb(0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(230deg, rgba(53, 57, 74, 0) -100%, rgb(102, 98, 98) 0%);
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(230deg, rgba(53, 57, 74, 0) -100%, rgb(0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}
body .login .validation {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 14px;
  opacity: 0;
}
body .login .disclaimer {
  position: absolute;
  bottom: 20px;
  left: 35px;
  width: 250px;
}
body .login_title {
  // margin-left:-20px;
  color: #D3D7F7;
  height: 60px;
  text-align: left;
  font-size: 20px;
}
body .login_fields {
  height: 208px;
  /* position: absolute;
  left: 0; */
}
body .login_fields .icon {
  position: absolute;
  font-size:30px;
  z-index: 1;
  left: 36px;
  top: 8px;
  opacity: .5;
}

body .login_fields input[type='password'],body .login_fields input[type='text'] {
  color: #fff !important;
}
body .login_fields input[type='text'], body .login_fields input[type='password'] {
  color: #fff;
  width: 250px;
  height:40px;
  margin-top: -2px;
  background: rgba(57, 61, 82, 0);
  left: 0;
  padding: 10px 35px;
  outline: none;
  font-family: 'Gudea', sans-serif;
  box-shadow: none;
}
body .login_fields__user, body .login_fields__password {
  position: relative;
}
body .login_fields__submit {
  line-height:30px;
  position: relative;
  top: 35px;
  left: 0;
  width: 100%;
  // right: 0;
  // float:left;
  text-align: center;
}
body .login_fields__submit .forgot {
  float: right;
  font-size: 10px;
  margin-top: 11px;
  text-decoration: underline;
}
body .login_fields__submit .forgot a {
  color: #606479;
}
body .login_fields__submit input {
  border-radius: 4px;
  background: transparent;
  padding: 15px 30px;
  border: 1px solid #4FA1D9;
  color: #4FA1D9;
  font-size:12px;
  text-transform: uppercase;
  -webkit-transition-property: background,color;
          transition-property: background,color;
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
}
body .login_fields__submit input:focus {
  box-shadow: none;
  outline: none;
}
body .login_fields__submit input:hover {
  color: white;
  background: #4FA1D9;
  cursor: pointer;
  -webkit-transition-property: background,color;
          transition-property: background,color;
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
}
</style>